<template>
   <div class="content">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <div class="swiper1">
               <van-swipe :autoplay='3000' indicator-color="white" :height="180">
               <van-swipe-item><router-link to='/panasonic' tag='div' class="spec1"><img src="../assets/3-4.gif" alt=""></router-link></van-swipe-item>
               <van-swipe-item><router-link to='/hottop' tag='div' class="spec1"><img src="../assets/3-5.gif" alt=""></router-link></van-swipe-item>
               <van-swipe-item><router-link to='/nasdi' tag='div' class="spec1"><img src="../assets/3-6.gif" alt=""></router-link></van-swipe-item>
               <van-swipe-item><router-link to='/superhealth' tag='div' class="spec1"><img src="../assets/3-7.gif" alt=""></router-link></van-swipe-item>
               </van-swipe>
            </div>
           <van-grid>
               <van-grid-item icon="like-o" text="生活美食" :to="{name:'classify',query:{id:1,title:'生活美食'}}"/>
               <van-grid-item icon="star-o" text="服饰鞋包" :to="{name:'classify',query:{id:2,title:'服饰鞋包'}}"/>
               <van-grid-item icon="birthday-cake-o" text="美妆饰品" :to="{name:'classify',query:{id:3,title:'美妆饰品'}}"/>
               <van-grid-item icon="goods-collect-o" text="家纺床品" :to="{name:'classify',query:{id:4,title:'家纺床品'}}"/>
               <van-grid-item icon="flower-o" text="健康保健" :to="{name:'classify',query:{id:5,title:'健康保健'}}"/>
               <van-grid-item icon="cashier-o" text="家电数码" :to="{name:'classify',query:{id:6,title:'家电数码'}}"/>
               <van-grid-item icon="logistics" text="日用保鲜" :to="{name:'classify',query:{id:7,title:'日用保鲜'}}"/>
               <van-grid-item icon="chart-trending-o" text="厨具厨电":to="{name:'classify',query:{id:8,title:'厨具厨电'}}"/>
            </van-grid>
            <div class="hot-buy">
         <h2>- 今日明星团 -</h2>
         <div class="hb-adv1">
            <div class="hb-adv1-wrap">
              <router-link to='' tag='div'><img src="../assets/3-1.gif" alt="" style="width:100%" height="100%"></router-link> 
            </div>
         </div>
         <div class="hb-group">
             <div class="hb-adv2">
               <div class="hb-adv2-wrap">
              <router-link to='' tag='div'><img src="../assets/3-2.gif" alt="" style="width:100%" height="100%"></router-link> 
               </div>
            </div>
            <div class="hb-adv2">
               <div class="hb-adv2-wrap">
              <router-link to='' tag='div'><img src="../assets/3-3.gif" alt="" style="width:100%" height="100%"></router-link> 
               </div>
            </div>
         </div>
      </div>
            <div class="adv">
               <ul>
                  <li>
                     <figure>
                        <figcaption>
                           <span>今日团购</span>
                        </figcaption>
                        <img src="../assets/3-8.gif" alt="">
                     </figure>
                  </li>
                  <li>
                     <figure>
                        <figcaption>
                           <span>2人团</span>
                        </figcaption>
                        <img src="../assets/3-9.gif" alt="">
                     </figure>
                  </li>
                  <li>
                     <figure>
                        <figcaption>
                           <span>品牌团</span>
                        </figcaption>
                        <img src="../assets/3-10.gif" alt="">
                     </figure>
                  </li>
                  <li>
                     <figure>
                        <figcaption>
                           <span>团购排行</span>
                        </figcaption>
                        <img src="../assets/3-11.gif" alt="">
                     </figure>
                  </li>
               </ul>
            </div>

            <div class="goods-list-tit">
               <ul class="title">
                  <li @click="tab1()">销量</li>
                  <li @click="tab2()">上新</li>
                  <li @click="tab3()">价格</li>
               </ul>
              <ul class="more-goods-con">
                   <li v-for="(item,i) in list" :key="i" @click="detail(item.pid)">
                     <div class="more-good-wrap">
                        <img :src="item.pimg" alt="">
                     </div>
                     <h3>{{item.pname}}</h3>
                     <p>￥{{item.pprice}}</p>
                  </li>
               </ul>
            </div>
         </van-pull-refresh>
    </div> 
</template>

<script>
import * as api from '../../api/getproductlist'
export default {
   name:'P2',
   data(){
      return{
         list:[],
         isLoading: false,
         btnFlag:true
      }
   },
   mounted(){
     
      api.getclasspro({classid:1}).then(data=>{
         this.list=data.data.data
      })
      
   },
   methods:{
      tab1(){
          api.getclasspro({classid:1}).then(data=>{
         this.list=data.data.data
      })
      },
       tab2(){
          api.getclasspro({classid:2}).then(data=>{
         this.list=data.data.data
      })
      },
      onRefresh() {
      setTimeout(() => {
        this.$toast('刷新成功');
        this.isLoading = false;
      }, 500);
      },
       tab3(){
          api.getclasspro({classid:3}).then(data=>{
         this.list=data.data.data
      })
      },
       detail(id){
      this.$router.push("/detailpro/" + id);          
        }
   }
}
</script>

<style scoped>
.go-top{
   width: 50px;
   height: 50px;
   position: fixed;
   left: 20px;
   bottom: 100px
}
.goods-list-tit{
   background: #fff;
   margin-top: 10px
}
.goods-list-tit .title{
   display: flex
}
.goods-list-tit .title li{
   width: 33%;
   text-align: center;
   height: 40px;
   line-height: 40px;
   font-size: 12px;
   color: #666666
}
.adv{
   margin-top: 10px;
   background: #fff
}
.adv ul{
   display: flex;
   padding: 0 12px;
   padding-top: 10px;
   padding-bottom: 5px
}
.adv ul li{
   width: 24%;
   margin-right: 4px;
   background:#f5f5f5;
 
}
.adv ul li figure{
  display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center

}
.adv ul li img{
   width: 80%;
}
.adv ul li figcaption span{
   font-size: 13px;
   width: 100%;
   display: inline-block;
   text-align: center;
   height: 20px;
   line-height: 20px;
   font-weight: 600;
}
p,h1,h2,h3,figure{
   margin: 0
}
.spec1 {
   height: 100%;
   width: 100%; 
}
.spec1 img{
   height: 100%;
   width: 100%; 
}
 .hot-buy figure{
   margin: 0;
   width: 32%;
   margin-bottom: 5px;
   flex: 0 0 auto;
   margin-right: 2px
}
 .hot-buy  figure img{
   width: 100%;
   height: 80px;
   background: greenyellow;
   display: inline-block
}
 .hot-buy figure h3,p{
   margin:0
}
 .hot-buy figure h3{
   font-size: 10px;
   line-height: 20px;
   font-weight:400;
}
  .hot-buy figure p{
   color: red;
   height: 20px;
   line-height: 20px;
   font-size: 14px
}
.hb-adv2 p{
   font-size: 10px;
   padding-left: 5px;
   color: #666
}
.hb-adv2 p span{
   color: red
}
.hb-adv2-wrap{
    width: 100%;
   height: 115px;
   background: pink;
   overflow: hidden;
   border-radius: 10px 10px 0 0 
}
.hb-group{
   height: 105 px;
   margin-top: 8px;
   display: flex;
   justify-content: space-between
}
.hb-group .hb-adv2{
   width: 49%;
    box-shadow:1px 3px 3px  #5199ae;
   border-radius: 10px;
   margin-top:8px;
}
.hb-adv1 p{
   font-size: 10px;
   padding-left: 5px;
   color: #666
}
.hb-adv1 p span{
   color: red
}
.hb-adv1{
   width: 100%;
  box-shadow:0px 3px 3px  red;
   border-radius: 10px;
   margin-top:8px;
   margin-bottom: 5px
}
.hb-adv1-wrap{
    width: 100%;
   height: 155px;
   background: pink;
   overflow: hidden;
   border-radius: 10px 10px 0 0 
}
.hot-buy em{
   font-style: normal;
   color: #000;
   font-weight: 500;
}
.hot-buy{
   background: #fff;
   padding: 12px;
   margin-top: 10px;
}
.hot-buy h2,p{
   margin: 0
}
.hot-buy h2{
   text-align: center;
   font-weight: normal;
   font-size: 15px
}
.hot-buy h2 em{
   font-size: 12px;
   font-style: normal;
   display: flex;
   align-items: center;
   font-weight: normal;
}
.more-goods-con .more-good-wrap{
   width: 100%;
   height: 130px;
   margin-top: 15px;
   margin-bottom: 15px
}
.more-goods-con .more-good-wrap img{
   display: inline-block;
     width: 100%;
   height: 100%;
   background: red
}
.more-goods-con {
   width: 100%;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}
.more-goods-con li h3,p{
   margin: 0
}
.more-goods-con li p{
   width: 100%;
   text-align: left;
   color: red;
   font-size: 12px;
   height: 30px;
}
.more-goods-con li h3{
     width:100%;
    word-break:break-all;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    font-weight: normal;
    color: #323232;
    margin-bottom: 10px
}
.more-goods-con li{
   width: 50%;
   border: 1px solid #f3f3f3;
   height: 230px;
   padding: 10px 6px;
   box-sizing: border-box;
   border-right:0;
   margin-top:-1px ;
   display: flex;
   flex-direction: column;
   align-items: center;
  justify-content:start;
  padding-bottom: 0
}
.more-goods-con li:nth-child(odd){
   border-left:0 
}
</style>